<template>

	<view class="box-c c-t">
		<scroll-view scroll-y="true" :style="{'height':height+'px'}">
			<view class="">
				<view class="title-image">
					<image :src="activityInfo.image" mode=""></image>
				</view>
				<view class="box d-jc-sb list-2">
					<text>{{activityInfo.className}}</text>
					<text v-if="this.activityInfo.isApply==1" class="isApply">已报名</text>
					<text v-if="this.activityInfo.isApply==-1">已有{{activityInfo.number}}人报名</text>
				</view>
				<view class="line"></view>
				<view class="box-c">
					<view class=" ml-2 box">
						<view class="flex-1">
							<text class="class-time-title">
								上课时间
							</text>
						</view>
						<view class="box flex-4 d-f-wrap">
							<text class="class-time" v-for="attendTime in activityInfo.attendTime">
								{{attendTime.week}} {{attendTime.start_time}}-{{attendTime.end_time}}
							</text>
						</view>
					</view>
					<view class="list-3 ml-2 box">
						<text class="flex-1">
							上课教室
						</text>
						<text class="flex-4">
							{{activityInfo.classAddress}}
						</text>
					</view>

					<view class="list-3 ml-2 box">
						<text class="flex-1">
							课程时间
						</text>
						<view class="flex-4 box active-time">
							<text>{{activityInfo.startTime | dateFormatYear }}</text>
							<text>—</text>
							<text>{{activityInfo.endTime|dateFormatYear}}</text>
						</view>
					</view>

				</view>
				<view class="background">
				</view>
				<view class="Classleader">
					<view class=""
						style="color: rgba(51, 51, 51, 1);font-weight: bold;font-size: 32rpx;margin-left: 30rpx;">
						班级负责人
					</view>
					<scroll-view scroll-x="true" class="scroll-view_H box">
						<view class="box">
							<view class="scroll-view-item_H  Classleader-1 box-c  d-ai-c"
								v-for="(item,index) in activityInfo.activityTeacher">
								<view class="box-c info" @click="teacherIntro(item.teacherId)">
									<view class="">
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;"
											:src="item.teacherImage" mode=""></image>
									</view>

									<view class="" style="font-size: 26rpx;color: rgba(51, 51, 51, 1);">
										{{item.teacherName}}
									</view>
									<view class="" style="font-size: 22rpx;color:rgba(153, 153, 153, 1)">
										<text v-if='item.teacherRole==1'>主教师</text>
										<text v-if='item.teacherRole==2'>助教</text>
										<text v-if='item.teacherRole==3'>班长</text>
									</view>
								</view>
							</view>
						</view>


					</scroll-view>
				</view>
				<view style="height: 80rpx;background-color: #FFFFFF;line-height: 80rpx;" class="page-section-spacing">
					<view class="scroll-view-item_H1" v-for="(item,index) in tabList" @tap="changeTab(index)">
						<view class="animate__animated" hover-class="animate__rubberBand"
							:class="index == isActive ? 'active' :''">
							{{item.name}}
						</view>
						<view class="" :class="index == isActive ? 'line1' :''"></view>
					</view>
				</view>
				<view class="line3">

				</view>
				<!-- 课程介绍 -->
				<view class="scroll-panel" :style="{ 'height':orderHeight + 'px' }" style="background-color: #FFFFFF;"
					v-if="this.isActive===0">
					<view class="class-describe">
						{{activityInfo.label}}
					</view>

				</view>
				<!-- 教学大纲 -->
				<view class="scroll-panel" :style="{ 'height':orderHeight + 'px' }" style="background-color: #FFFFFF;"
					v-if="this.isActive===2">
					<view class="boxScroll" :class="{active:flag}">
						<view class="content1" v-for="(v,i) in activityInfo.classOutline" :key="i"
							v-if="activityInfo.classOutline !==null">
							<view style="line-height: 36rpx;">
								<text v-if="i<9&&activityInfo.classOutline[i]!==undefined">0</text>
								<text v-if="activityInfo.classOutline[i]!==undefined">{{i+1}}</text>
							</view>
							<view style="line-height: 36rpx;margin-left: 15rpx;">{{v}}
							</view>
						</view>
					</view>
					<div class="delshow"  v-if="activityInfo.classOutline !==null"
						@click="showTag">
						<span>{{flag===false?'收起':'查看全部'}}</span>
						<text v-if="flag==true" class="iconfont iconxia xia"></text>
						<text v-if="flag==false" class="iconfont iconshang xia"></text>
					</div>
				</view>
				<!-- 教材介绍 -->
				<view class="scroll-panel" :style="{ 'height':orderHeight + 'px' }" style="background-color: #FFFFFF;"
					v-if="this.isActive===1">
					<view class="textbook" v-if="activityInfo.classMaterials !==null">
						所用教材：{{activityInfo.classMaterials.text}}
					</view>
					<view else class="textbookimg" v-if="activityInfo.classMaterials !==null">
						<view class="" v-for="(v,i) in activityInfo.classMaterials.images" :key="i">
							<image class="image1" :src="v" mode=""></image>
							
									
									
									
						</view>
					</view>
					<view v-if="activityInfo.classMaterials==[]" class="textbookimg">
						<view class="" v-for="(v,i) in activityInfo.classMaterials.images" :key="i">
							<image class="image1" :src="v" mode=""></image>
						</view>
					</view>
				</view>

				<!-- 教学进度 -->
				<view class="scroll-panel box-0" :style="{ 'height':orderHeight + 'px' }"
					style="background-color: #FFFFFF;" id="scroll-panel" v-if="this.isActive===3">
					<view class="content" v-for="(v,i) in activityInfo.classProgress" :key="i">
						<view class="" :class="v.flag === '0' ? 'content-l' :'content-2'">
							<view>
								<text v-if="i<9">0</text>
								<text>{{i+1}}</text>
							</view>
							<view>{{v.title}}</view>
						</view>
						<view class="" :class="v.flag === '0' ? 'content-m' :'content-m2'">
							{{v.outline}}
						</view>
						<view class="content-n">
							<text>{{v.start_time}}</text>
							<text v-if="v.flag==='0'">已结束</text>
						</view>
						<view class="line2">

						</view>
					</view>


				</view>



			</view>

		</scroll-view>
		<view v-if="activityInfo.isApply==1" class="bottom box d-ai-c animated fadeInUp">
			<button class="btn2 box d-ai-c d-jc-c" @tap='signModal(activityInfo)'
				:class="activityInfo.isSign==0||activityInfo.isSign==1?'btn2-active':''">
				<text v-if="activityInfo.isSign==0">立即签到</text>
				<text v-if="activityInfo.isSign==3">已签到</text>
				<text v-if="activityInfo.isSign==1">立即签退</text>
				<text v-if="activityInfo.isSign==4">已签退</text>
				<text v-if="activityInfo.isSign==2">今天暂无此课程</text>
			</button>
		</view>
		<view v-if="activityInfo.isApply==-1" class="bottom box d-jc-sb d-ai-c animated fadeInUp">
			<view class="pl-3 class-price">
				<text>课程价格：</text>
				<text>{{activityInfo.price}}</text>
			</view>
			<view class="pr-3">
				<button class="btn" @tap='open()'>
					立即报名
				</button>

			</view>

		</view>
		<view class="content">
			<Modal v-model="show" :text='confirmText' @cancel='cancel' @confirm='confirm' />
		</view>
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="pop-t">
					<image class="pop_images1" src="../../static/images/shoplist/guanbi@2x.png" mode="" @tap="close()"></image>
					<view>选择支付方式</view>
				</view>
				<view class="pop-c">
					<text>￥</text>
					<text>{{activityInfo.price}}</text>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/images/shoplist/jfzf@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/images/shoplist/wxzf@2x.png" mode=""></image>
							<view class="pop-name">
								<text>{{item.name}}</text>
								<text v-if="item.value==='1'">(剩余{{accumulatePoints}}积分)</text>
							</view>
						</view>
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<button class="payment" type="default" @tap='createOrders'>
					立即支付
				</button>


			</view>

		</wybpopup>

	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	import Modal from '@/components/x-modal/x-modal'
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		components: {
			Modal,
			wybpopup
		},
		data() {
			return {
				items: [{
						value: '1',
						name: '积分支付'
					},
					{
						value: '2',
						name: '微信支付',
						checked: 'true'
					}

				],
				current: 0,
				brandFold: true,
				leftIndex: 0,
				scrollInto: '',
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				scrollHeight: 0,
				isActive: 0,
				topArr: [],
				tabList: [{
					id: "1",
					name: '课程介绍'
				}, {
					id: "2",
					name: '教材介绍'
				}, {
					id: "3",
					name: '教学大纲'
				}, {
					id: "4",
					name: '教学进度'
				}],
				height: '',
				isApply: true,
				activityInfo: '',
				id: '',
				show: false,
				confirmText: '',
				locations: [],
				signModalType: 0, // 1 签到弹窗 2 报名弹窗确认
				newArr: [],
				orderHeight: 0,
				flag: false,
				type: true,
				accumulatePoints:0

			}
		},

		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度

				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(1160) //windoHeight为窗口高度，主要使用的是这个
					that.height = res.windowHeight - uni.upx2px(120)
					console.log('高度' + that.orderHeight)
				}
			})
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.userInfo)
			this.getActivityInfo()
			
		},
		computed: {
			...mapState(['loginState', 'userInfo']),
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
			}
		},
		onShow() {
		
		},
		methods: {
			...mapMutations(['logout', 'setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				
				console.log(this.loginState)
				console.log(this.userInfo)
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
						this.accumulatePoints = this.userInfo.userInfo.accumulatePoints
					}
			
				})
			
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			open() {
				if(this.loginState){
					this.getUserInfo()
					this.$refs.popup.show()
				}else{
					uni.navigateTo({
						url:'../user/login'
					})
				}
			},
			close() {
				// this.$refs.popup.close()
				this.$refs.popup.hide()
			},
			// rt(){
			// 	setTimeout(()=>{
			// 		uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
			// 			success:(res) =>{ //成功回调函数
			// 				let obj = uni.createSelectorQuery().select(".boxScroll")

			// 				    obj.boundingClientRect((data)=> { // data - 各种参数

			// 				      console.log('高度' +data.height)
			// 					 if(data.height > 90){
			// 						 this.flag = false
			// 					 }
			// 				    }).exec()

			// 			}
			// 		})
			// 	},500)
			// },
			showTag() {
				console.log(this.flag)
				if(this.flag===false){
					this.activityInfo.classOutline = this.activityInfo.classOutline.slice(0,4)
					this.flag = true
				}else{
					this.getActivityInfo()
					this.flag = false
				}
				
			},
			flagMath(){
				this.activityInfo.classOutline = this.activityInfo.classOutline.slice(0,4)
				this.flag = true
			},
			teacherIntro(id) {
				uni.navigateTo({
					url: './teacher-introduce?id=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			//点击事件改变swiper
			changeTab(active) {
				this.isActive = active
				if (active == 0) {
					this.payState = ''
					console.log(this.isActive)
				} else if (active == 1) {
					this.payState = 1
				} else if (active == 2) {
					this.payState = 0
					console.log(this.activityInfo.classOutline)
					if(this.activityInfo.classOutline!==null){
						this.flagMath()
					}
				} else if (active == 3) {
					this.payState = 9
				}
			},
			cancel(e) {
				uni.showToast({
					title: '已取消',
					duration: 1500,
					icon: "none"
				});
			},
			confirm(e) {
				if (this.signModalType == 1) {
					this.signIn()
				} else if (this.signModalType == 2) {
					this.createOrders()
					// this.applyActivity()
				}
			},
			signModal(activityInfo) {
				if (activityInfo.isSign == 2) {
					uni.showToast({
						title: '今天暂无此课程',
						duration: 1500,
						icon: "none"
					});
					return
				}
				if (activityInfo.isSign == 3) {
					uni.showToast({
						title: '已签到',
						duration: 1500,
						icon: "none"
					});
					return
				}
				if (activityInfo.isSign == 4) {
					uni.showToast({
						title: '已签退',
						duration: 1500,
						icon: "none"
					});
					return
				}
				if (this.activityInfo.isSign == 0) {
					this.confirmText = '您确定要签到吗?'
				} else if (this.activityInfo.isSign == 1) {
					this.confirmText = '您确定要签退吗?'
				}
				this.signModalType = 1 //签到弹窗
				this.show = true
			},
			signIn() {
				let _this = this
				// permision.gotoAppPermissionSetting()
				let flag = permision.checkSystemEnableLocation()

				if (flag) {
					console.log("进入==")
					//开启定位
					uni.showLoading({
						title: '正在获取位置...'
					});
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							_this.locations.length = 0
							_this.locations.push(res.longitude, res.latitude)
							console.log(_this.locations)
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							_this.$api.signUpOrOut({
								classOrActivityId: _this.id,
								locations: JSON.stringify(_this.locations)
							}).then((res) => {
								if (res.data.success) {
									let message = ''
									let isSign = -1
									if (_this.activityInfo.isSign == 0) {
										message = '签到成功'
										isSign = 3
									}
									if (_this.activityInfo.isSign == 1) {
										message = '签退成功'
										isSign = 4
									}
									_this.activityInfo.isSign = isSign
									uni.showToast({
										title: message,
										duration: 1500,
										icon: "none"
									});
								} else {
									uni.showToast({
										title: res.data.message,
										duration: 1500,
										icon: "none"
									});
								}
								uni.hideLoading();

							})
						},
						fail() {
							uni.showToast({
								title: "请检查位置是否开启",
								duration: 1500,
								icon: "none"
							});
							console.log("失败了")
							setTimeout(function() {
								permision.gotoAppPermissionSetting()
							}, 1000);


						}
					});
				} else {
					uni.showToast({
						title: "请检查位置是否开启",
						duration: 1000,
						icon: "none"
					});
					setTimeout(function() {
						permision.gotoAppPermissionSetting()
					}, 1500);
					return;
				}

			},
			applyActivityModal() {
				this.signModalType = 2 //报名提示弹窗
				this.confirmText = '您确定要报名吗?'
				this.show = true
			},
			//创建订单
			createOrders() {
				
				let type=1
				if(this.current===0){
					type=1
				}
				if(this.current===1){
					type=2
				}
				let parameter = {
					classOrActivityId: this.id
				}
				let _this = this
				this.$api.createOrders(parameter).then(res => {
					if (res.data.success) {
						_this.applyActivity(res.data.dataMap.ordersNumber,type)
					} else {
						_this.close()
						uni.showToast({
							title: res.data.message,
							duration: 1500,
							icon: "none"
						});
					}
				})

			},
			applyActivity(ordersNumber,type) {
				let _this = this
				this.$api.applyActivity({
					ordersNumber: ordersNumber,
					type:type
				}).then((res) => {
					if(res.data.success){
					if(type==1){ //余额支付
						if (res.data.success) {
							_this.activityInfo.isApply = 1
							uni.showToast({
								title: '报名成功！',
								duration: 1500,
								icon: "none"
							});
							this.getActivityInfo()
							this.close()
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: "none"
							});
							if (res.data.code == 20020) {
								setTimeout(function() {
									uni.navigateTo({
										url: '../pay/pay'
									})
								}, 1000);
							}
						
						}
					}else if(type==2){
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: res.data.dataMap,
							success:(res)=> {
								uni.showToast({
									title: "支付成功",
									duration: 2500,
								});
								this.getActivityInfo()
								this.close()
								// setTimeout(function() {
								// 	uni.switchTab({
								// 		url: '../user/user'
								// 	})
								// }, 1700);
						
							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: "支付失败",
									duration: 2000,
									icon: 'none',
								});
								// plus.nativeUI.alert(JSON.stringify(e), function() {
						
								// }, "提示", "关闭")
						
							}
						})
					}
					}else{
						this.close()
						uni.showToast({
							title: res.data.message,
							duration: 2500,
							icon: "none"
						});
					}
				

				})
			},
			getActivityInfo() {
				this.$api.getClassOrActivityInfo({
					id: this.id
				}).then((res) => {
					this.activityInfo = res.data.dataMap
					console.log(this.activityInfo)
				})
			}

		}
	}
</script>

<style scoped>
	.payment{
		width: 670rpx;
		height: 88rpx;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 50rpx;
	}
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		line-height: 120rpx;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		display: flex;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop-t>view{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 210rpx;
	}
	.pop_images1{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.popup {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}

	.boxScroll {
		/* height: 280rpx; */
		overflow: hidden;
		line-height: 70rpx;
		/* border: 1px dashed #B3D4FC; */
	}

	.active {
		height: auto;
		overflow: visible;
	}

	/* .c-t{
		height:100%;
	} */
	/* .box-0{
		margin-bottom: 100rpx;
	} */
	.xia {
		font-size: 28rpx;
		margin-left: 5rpx;
	}

	.scroll {
		padding-bottom: 80rpx;
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.fixed {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.bg {
		height: 50rpx;
		background-color: #f8f8f8;
	}

	.pannel {
		padding-bottom: 40rpx;
	}

	.delshow {
		height: 100rpx;
		border-top: 2rpx solid #EEEEEE;
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
		overflow: hidden;

	}

	.content-n {
		margin-top: 5rpx;
		margin-left: 82rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		display: flex;
	}

	.content-m {
		margin-top: 10rpx;
		margin-left: 82rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		display: flex;
	}

	.content-m2 {
		margin-top: 10rpx;
		margin-left: 82rpx;
		color: #333333;
		font-size: 24rpx;
		display: flex;
	}

	.content-l {
		margin-top: 6rpx;
		margin-left: 31rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 26rpx;
		display: flex;
		font-weight: bold;
	}

	.content-l>view:nth-child(1) {
		line-height: 36rpx;
	}

	.content-l>view:nth-child(2) {
		line-height: 36rpx;
		margin-left: 15rpx;
	}

	.content-2 {
		margin-top: 6rpx;
		margin-left: 31rpx;
		color: #333333;
		font-size: 26rpx;
		display: flex;
		font-weight: bold;
	}

	.content-2>view:nth-child(1) {
		line-height: 36rpx;
	}

	.content-2>view:nth-child(2) {
		line-height: 36rpx;
		margin-left: 15rpx;
	}

	.textbookimg {
		width: 680rpx;
		margin:20rpx auto;
	}

	.textbookimg>view {
		/* border:1px solid red; */
		display: inline-block;
		margin-right: 13rpx;
		white-space: nowrap;
	}

	.image1 {
		width: 215rpx;
		height: 150rpx;
		/* border: 1px solid red; */
		/* margin-left: 20rpx; */

	}

	.textbook {
		padding-top: 30rpx;
		margin-left: 31rpx;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		line-height: 36rpx;
	}

	.content1 {
		padding-top: 30rpx;
		margin-left: 31rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		display: flex;
	}

	.content {
		padding-top: 20rpx;

	}

	.line2 {
		width: 100%;
		height: 4rpx;
		background-color: rgba(238, 238, 238, 1);
		margin-top: 28rpx;

	}

	.line3 {
		width: 100%;
		height: 4rpx;
		background-color: rgba(238, 238, 238, 1);
		margin-top: -10rpx;
	}

	.page-section-spacing {
		background-color: #f3f3f3;
		display: flex;
		justify-content: space-around;
	}

	.line1 {
		height: 6rpx;
		background-color: #FF5551;
		width: 50%;
		margin: auto;
		border-radius: 50rpx;
		margin-top: 10rpx;
	}

	.line-gray {
		height: 1rpx;
		width: 660rpx;
		background-color: #f0f0f0;
		margin: auto;
		border-radius: 24rpx;
		z-index: 99;
	}

	.active {
		color: #a7a7a7;
	}

	.scroll-view-item_H1 {
		display: inline-block;
		width: 150rpx;
		height: 75rpx;
		text-align: center;
		font-size: 34rpx;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.Classleader-1 {
		width: 160rpx;
		height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		margin: 20rpx 0;
		margin-left: 30rpx;
	}

	.scroll-view-item_H {
		width: 160rpx;
		height: 200rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.info {
		margin-top: 12rpx;
	}

	.Classleader-t {
		display: inline-block;
		text-align: center;
		margin-left: 5rpx;

	}

	.Classleader {
		width: 100%;
		height: 340rpx;

	}

	.active-time text:nth-child(1) {
		color: #FF5551 !important;
		font-weight: 600;
	}

	.active-time text:nth-child(2) {
		width: 25px;
		text-align: center;
		color: #ff0000 !important;
	}

	.active-time text:nth-child(3) {
		color: #FF5551 !important;
		font-weight: 600;
	}

	.isApply {
		color: #FF5551 !important;
	}

	.btn2 {
		width: 700rpx;
		height: 80rpx;
		color: #fff;
		background-color: #9c9896;
	}

	.btn2-active {
		background-color: #FF5551 !important;
	}

	.class-price text:first-child {
		font-size: 28rpx;
	}

	.class-price text:last-child {
		font-size: 28rpx;
		color: #FF5551;
	}

	.class-title {
		font-size: 32rpx;

	}

	.class-describe {
		padding-top: 30rpx;
		margin-left: 31rpx;
		color: rgba(102, 102, 102, 1);
		font-size: 26rpx;
		line-height: 36rpx;
	}


	.class-time-title {
		color: #666;
	}

	.class-time {
		color: #FF5551;
		width: 290rpx;
		font-weight: 600;
	}


	.list-3 text:first-child {
		color: #666;

	}

	.list-3 text:last-child {
		color: #333;
	}

	.list-2 {
		padding: 15rpx 20rpx;
		position: sticky;
		top: 0;
		background-color: #ffffff;

	}

	.list-2 text:first-child {
		font-weight: 600;
		font-size: 36rpx;
	}

	.list-2 text:last-child {
		font-size: 24rpx;
		color: #999;
	}

	.btn {
		width: 250rpx;
		border-radius: 50rpx;
		background-color: #FF5551 !important;
		color: #fff;
	}

	.bottom {
		height: 120rpx;
		background-color: #ffffff;
		border-top: #f0f0f0 solid 2rpx;
	}

	.background {
		background-color: #F8F8F8;
		height: 20rpx;
	}

	.line {
		width: 700rpx;
		height: 2rpx;
		background-color: #dadada;
		margin: 0 auto;
		border-radius: 15rpx;
	}

	.title-image image {
		width: 750rpx;
		height: 500rpx;
	}
</style>
